<template>
  <view class="container">
    <uv-navbar leftIconSize="0" bgColor="#1071E7" placeholder>
      <template v-slot:center>
        <view class="tabs">
          <view class="tab-item" @click="setIndex(index)" :class="currentIndex == index?'active':''"
            v-for="(item, index) in tabsList" :key="index">
            {{item.name}}
          </view>
        </view>
      </template>
    </uv-navbar>
    <view class="main">
      <view class="tabTwos">
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view class="tabTwo-item" :class="currentTwoIndex == index?'activeTwo':''" @click="setTwoIndex(index)" v-for="(item, index) in tabsTwoList" :key="index">
            {{item.name}}
          </view>
        </scroll-view>
      </view>
      <view class="tableInfo">
        <view class="thead">
          <view class="thead-item" style="width: 20%;">
            排名
          </view>
          <view class="thead-item" style="width: 60%;">
            姓名
          </view>
          <view class="thead-item" style="width: 20%;">
            金额
          </view>
        </view>
      </view>
      <view class="tableInfo">
        <view class="tbody">
          <view class="tbody-item" v-for="(item, index) in dataList" :key="index">
            <view class="number" style="width: 20%;">{{index+1}}</view>
            <view class="name" style="width: 60%;">{{item.name}}</view>
            <view class="amount" style="width: 20%;">{{item.amount}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        tabsList: [{
            name: "签单"
          },
          {
            name: "回款"
          }
        ],
        currentIndex: 0,
        tabsTwoList: [{
            name: "本月"
          },
          {
            name: "上月"
          },
          {
            name: "本季度"
          },
          {
            name: "上季度"
          },
          {
            name: "近一年"
          }
        ],
        currentTwoIndex: 0,
        dataList: [
          {
            name: "石亚辉",
            amount: "100000"
          },
          {
            name: "杨虎",
            amount: "88880"
          }
        ]
      }
    },
    onLoad() {
      this.dataList.forEach(v=> v.amount = tools.formatCurrency(v.amount));
    },
    methods: {
      setIndex(index) {
        this.currentIndex = index;
      },
      setTwoIndex(index){
        this.currentTwoIndex = index;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .active {
    font-weight: bold !important;
    font-size: 36rpx !important;
  }
  .activeTwo{
    background: #1071E7 !important;
    color: #fff !important;
  }
  .container {
    .tabs {
      display: flex;
      align-items: center;

      .tab-item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #FFFFFF;
        margin: 0 40rpx;
      }
    }

    .main {
      padding: 0 30rpx;
      box-sizing: border-box;

      .tabTwos {
        padding: 40rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .scroll-view_H {
          white-space: nowrap;
          width: 100%;
          .tabTwo-item {
            width: 124rpx;
            flex: 1;
            height: 58rpx;
            border-radius: 30rpx;
            border: 2rpx solid #1071E7;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #1071E7;
            text-align: center;
            line-height: 58rpx;
            display: inline-block;
            margin-right: 30rpx;
          }
        }
      }
      .tableInfo{
        .thead{
          display: flex;
          background: #FFFFFF;
          box-shadow: 0rpx -8rpx 20rpx -8rpx rgba(16,113,231,0.1), 0rpx 32rpx 32rpx -16rpx rgba(16,113,231,0.1);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          .thead-item{
            height: 80rpx;
            line-height: 80rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            text-align: center;
          }
        }
        .tbody{
          padding: 30rpx 0;
          box-sizing: border-box;
          .tbody-item{
            display: flex;
            height: 100rpx;
            line-height: 100rpx;
            .number{
              font-family: DIN, DIN;
              font-weight: bold;
              font-size: 36rpx;
              color: #333333;
              text-align: center;
            }
            .name{
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              text-align: center;
            }
            .amount{
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>